<template>
    <div>
        <!-- <div> -->
            <!-- <TopNav></TopNav> -->
            <el-container>
                <el-header><h1>我是element-ui组件</h1></el-header>
                <el-container>
                    <el-aside width="300px">
                        <ZuoNav></ZuoNav>
                    </el-aside>
                    <el-main><router-view></router-view></el-main>
                </el-container>
            </el-container>
    </div>
</template>
<script>
import TopNav from '../components/TopNav'
import ZuoNav from '../components/ZuoNav'
export default {
    components:{
        TopNav,
        ZuoNav
    }
}
</script>
<style lang="less" scoped>
    .el-header{
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    height: 20vh!important;
    h1{
       line-height: 20vh; 
    }
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height: 80vh;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    // text-align: center;
    height: 80vh;
  }

</style>